<template>
  <div class="map-container">
    <div class="map-wrapper">
      <div v-if="loading" class="loading">
        <el-icon class="loading-icon" :size="24"><Loading /></el-icon>
        <span>正在加载地图数据...</span>
      </div>
      <v-chart 
        v-else 
        class="chart" 
        :option="option"
        @click="handleMapClick"
      />
    </div>
    <transition name="slide-fade">
      <div class="data-panel" v-if="currentProvince">
        <div class="panel-header">
          <h3>{{ currentProvince.name }}志愿者数据</h3>
          <el-icon class="close-icon" @click="currentProvince = null"><Close /></el-icon>
        </div>
        <div class="stats-grid">
          <div class="stat-card">
            <div class="stat-value">{{ currentProvince.volunteers.toLocaleString() }}</div>
            <div class="stat-label">注册志愿者</div>
          </div>
          <div class="stat-card">
            <div class="stat-value">{{ currentProvince.activities.toLocaleString() }}</div>
            <div class="stat-label">活动次数</div>
          </div>
          <div class="stat-card">
            <div class="stat-value">{{ currentProvince.hours.toLocaleString() }}</div>
            <div class="stat-label">服务时长(小时)</div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { MapChart } from 'echarts/charts'
import { 
  GeoComponent, 
  VisualMapComponent, 
  TitleComponent, 
  TooltipComponent,
  LegendComponent 
} from 'echarts/components'
import VChart from 'vue-echarts'
import * as echarts from 'echarts'

// 注册组件
use([
  CanvasRenderer,
  MapChart,
  GeoComponent,
  VisualMapComponent,
  TitleComponent,
  TooltipComponent,
  LegendComponent
])

const loading = ref(true)
const currentProvince = ref(null)

// Mock数据
const provinceData = {
  '北京': { volunteers: 12000, activities: 150, hours: 45000 },
  '上海': { volunteers: 15000, activities: 180, hours: 52000 },
  '广东': { volunteers: 25000, activities: 320, hours: 86000 },
  '浙江': { volunteers: 18000, activities: 260, hours: 65000 },
  '江苏': { volunteers: 20000, activities: 290, hours: 72000 },
  '福建': { volunteers: 16000, activities: 200, hours: 58000 },
  '山东': { volunteers: 19000, activities: 240, hours: 63000 },
  '海南': { volunteers: 8000, activities: 120, hours: 35000 },
  '天津': { volunteers: 9000, activities: 130, hours: 38000 },
  '河北': { volunteers: 12000, activities: 160, hours: 42000 },
  '辽宁': { volunteers: 14000, activities: 170, hours: 48000 },
  '广西': { volunteers: 13000, activities: 150, hours: 44000 }
}

const option = ref({
  backgroundColor: '#f5f6fa',
  title: {
    text: '全国海洋生态保护志愿者分布',
    subtext: '数据更新时间：2024年3月',
    left: 'center',
    top: 20,
    textStyle: {
      color: '#333',
      fontSize: 24,
      fontWeight: 'bold'
    },
    subtextStyle: {
      color: '#666',
      fontSize: 14
    }
  },
  tooltip: {
    trigger: 'item',
    formatter: (params) => {
      const data = provinceData[params.name] || {}
      return `
        <div style="padding: 4px 8px;">
          <h4 style="margin: 0 0 8px 0;">${params.name}</h4>
          <p style="margin: 4px 0;">志愿者人数：${data.volunteers || 0}人</p>
          <p style="margin: 4px 0;">活动次数：${data.activities || 0}次</p>
          <p style="margin: 4px 0;">服务时长：${data.hours || 0}小时</p>
        </div>
      `
    },
    backgroundColor: 'rgba(255, 255, 255, 0.9)',
    borderColor: '#eee',
    borderWidth: 1,
    textStyle: {
      color: '#333'
    }
  },
  visualMap: {
    min: 0,
    max: 25000,
    left: '5%',
    bottom: '5%',
    text: ['高', '低'],
    calculable: true,
    inRange: {
      color: ['#e0f3f8', '#2171b5', '#08519c', '#08306b']
    },
    textStyle: {
      color: '#333'
    }
  },
  geo: {
    map: 'china',
    roam: true,
    scaleLimit: {
      min: 1,
      max: 3
    },
    zoom: 1.2,
    center: [104.5, 36.5],
    label: {
      show: true,
      fontSize: 10,
      color: '#333'
    },
    itemStyle: {
      areaColor: '#e0f3f8',
      borderColor: '#fff',
      borderWidth: 1,
      shadowColor: 'rgba(0, 0, 0, 0.2)',
      shadowBlur: 5,
      shadowOffsetX: 2,
      shadowOffsetY: 2
    },
    emphasis: {
      itemStyle: {
        areaColor: '#a6cee3',
        shadowColor: 'rgba(0, 0, 0, 0.5)',
        shadowBlur: 10
      },
      label: {
        color: '#000',
        fontSize: 12
      }
    }
  },
  series: [{
    name: '志愿者人数',
    type: 'map',
    geoIndex: 0,
    data: Object.entries(provinceData).map(([name, data]) => ({
      name,
      value: data.volunteers,
      itemStyle: {
        emphasis: {
          areaColor: '#a6cee3'
        }
      }
    }))
  }]
})

// 初始化地图
const initMap = async () => {
  try {
    loading.value = true
    const response = await fetch('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json')
    const data = await response.json()
    echarts.registerMap('china', data)
  } catch (error) {
    console.error('加载地图数据失败:', error)
  } finally {
    loading.value = false
  }
}

// 处理地图点击事件
const handleMapClick = (params) => {
  if (params.name && provinceData[params.name]) {
    currentProvince.value = {
      name: params.name,
      ...provinceData[params.name]
    }
  }
}

onMounted(() => {
  initMap()
})
</script>

<style scoped lang="scss">
.map-container {
  display: flex;
  gap: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  min-height: 600px;
}

.map-wrapper {
  flex: 1;
  position: relative;
  height: 600px;
  background: #f5f6fa;
  border-radius: 8px;
  overflow: hidden;
}

.chart {
  width: 100%;
  height: 100%;
}

.loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  gap: 12px;
  
  .loading-icon {
    animation: rotate 1s linear infinite;
  }
  
  span {
    color: #666;
    font-size: 14px;
  }
}

.data-panel {
  width: 320px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;

  .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;

    h3 {
      margin: 0;
      color: #303133;
      font-size: 18px;
    }

    .close-icon {
      cursor: pointer;
      color: #909399;
      transition: color 0.3s;

      &:hover {
        color: #606266;
      }
    }
  }

  .stats-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 16px;
  }

  .stat-card {
    background: #f5f7fa;
    padding: 16px;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .stat-value {
      font-size: 24px;
      font-weight: bold;
      color: #409EFF;
      margin-bottom: 8px;
    }

    .stat-label {
      color: #606266;
      font-size: 14px;
    }
  }
}

// 动画效果
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.3s ease;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 768px) {
  .map-container {
    flex-direction: column;
  }

  .data-panel {
    width: 100%;
  }
}
</style> 